<template>
  <!-- 推广分享弹框 -->
  <Modal v-model="sharePop" class-name="vertical-center-modal" :mask-closable="false" :closable="false" width="40">
    <div slot="header" class="head-sty">
      <div class="title">{{ $t('promote.share_title_text') }}</div>
      <Icon type="md-close" class="close" color="#000000" @click="sharePop = !sharePop" />
    </div>
    <div class="content">
      <div class="left">
        <div class="label">{{ $t('promote.link_label') }}</div>
        <div class="link">
          {{ shareLink }}
          <Icon type="ios-copy" class="copy-icon" color="#767B93" @click="copyLink" />
        </div>
      </div>
      <div class="right">
        <div class="label">{{ $t('promote.price_label') }}<span>*</span></div>
        <div class="example-sty">
          <div class="list-sty">
            <div class="the-price" v-if="info.price">
              CNY {{ info.priceCNY ? bigTimes(info.priceCNY, 0.01) : bigTimes(info.price, 0.01) }}</div>
            <div class="the-price" v-else-if="info.saleInfo">
              CNY
              <template v-if="
                info.saleInfo.priceRangeList &&
                info.saleInfo.priceRangeList.length > 0
              ">
                <span class="big-text">
                  {{ info.saleInfo.priceRangeList[0].priceCNY ? bigTimes(info.saleInfo.priceRangeList[0].priceCNY, 0.01)
                    : bigTimes(info.saleInfo.priceRangeList[0].price, 0.01) }}
                </span>
              </template>
              <template v-else>
                {{
                  info.saleInfo.priceRanges && info.saleInfo.priceRanges.length > 0 &&
                    info.saleInfo.priceRanges[0].priceCNY
                    ? bigTimes(info.saleInfo.priceRanges[0].priceCNY, 0.01)
                    : ""
                }}
              </template>
            </div>
            <div class="the-desc">{{ $t('promote.the_label') }}</div>
          </div>
          <Divider type="vertical" style="height: 57px;" />
          <div class="list-sty">
            <div class="the-price">CNY 180 ≈ USD 27</div>
            <div class="the-desc">{{ $t('promote.every_label') }}</div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="footer-sty">
      <div class="tip-text">
        <span>*</span> {{ $t('promote.share_pop_tip') }}
      </div>
    </div>
  </Modal>
</template>
<script>
import { bigTimes } from "@/common/digital-computation";
import { getShareLink } from "@/api/product";
export default {
  props: ['info'],
  data() {
    return {
      bigTimes,
      sharePop: false,
      shareLink: '',
    }
  },
  methods: {
    open(info) {
      getShareLink(info).then((res) => {
        this.shareLink = res.result;
        this.sharePop = true;
      })
    },
    copyLink() {
      navigator.clipboard.writeText(this.shareLink).then(() => {
        this.$Message.success(this.$t("public.copySuccess"));
      }).catch(() => {
        this.$Message.error(this.$t("public.copyFail"));
      });
    },
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 32px;
}

:deep(.ivu-modal-body) {
  padding: 0 32px 0 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  text-align: left;
  padding: 32px;
}

.vertical-center-modal {
  font-family: Open Sans, Open Sans;
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-weight: 600;
      font-size: 32px;
      color: #1E1714;
      line-height: 38px;
    }

    .close {
      font-size: 38px;
      cursor: pointer;
    }
  }

  .content {
    display: flex;
    align-items: start;

    .left {
      .label {
        font-weight: 400;
        font-size: 22px;
        color: #1E1714;
        line-height: 26px;
        margin-bottom: 24px;
      }

      .link {
        font-weight: 400;
        font-size: 16px;
        color: #767B93;
        line-height: 19px;

        .copy-icon {
          font-size: 24px;
          cursor: pointer;
        }
      }
    }

    .right {
      margin-left: 80px;

      .label {
        font-weight: 400;
        font-size: 22px;
        color: #1E1714;
        line-height: 26px;
        margin-bottom: 24px;

        span {
          color: #FF186B;
          font-size: 26px;
          line-height: 26px;
        }
      }

      .example-sty {
        display: flex;
        gap: 24px;

        .list-sty {

          .the-price {
            font-weight: 600;
            font-size: 18px;
            color: #FF186B;
            line-height: 21px;
          }

          .the-desc {
            font-weight: 400;
            font-size: 16px;
            color: #AEB0B9;
            line-height: 19px;
            margin-top: 8px;
          }
        }
      }
    }
  }

  .footer-sty {
    .tip-text {
      font-weight: 400;
      font-size: 18px;
      color: #1E1714;
      line-height: 22px;

      span {
        color: #FF186B;
        font-size: 22px;
      }
    }
  }
}
</style>